<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <h2 class="mb-4">我的预约</h2>
        <div v-if="bookings.length === 0" class="text-center pa-8">
          <v-icon size="64" color="grey">mdi-calendar-blank</v-icon>
          <div class="text-h6 mt-4 text-grey">暂无预约记录</div>
        </div>
        <v-row v-else>
          <v-col v-for="booking in bookings" :key="booking.id" cols="12" md="6" lg="4">
            <v-card class="booking-card" elevation="2">
              <v-card-title class="text-h6">
                <v-icon left color="primary">mdi-calendar-check</v-icon>
                {{ booking.topic || '无主题' }}
          </v-card-title>
          <v-card-text>
                <div class="booking-info">
                  <div class="info-item">
                    <v-icon small color="grey">mdi-clock</v-icon>
                    <span class="ml-2">{{ formatDateTime(booking.startTime) }}</span>
                  </div>
                  <div class="info-item">
                    <v-icon small color="grey">mdi-clock-end</v-icon>
                    <span class="ml-2">{{ formatDateTime(booking.endTime) }}</span>
                  </div>
                  <div class="info-item">
                    <v-icon small color="grey">mdi-door</v-icon>
                    <span class="ml-2">{{ booking.roomName }}</span>
                  </div>
                  <div class="info-item">
                    <v-icon small color="grey">mdi-circle</v-icon>
                    <span class="ml-2">{{ getStatusText(booking.status) }}</span>
                  </div>
                </div>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                  color="error"
                  variant="outlined"
                  @click="cancelBooking(booking.id)"
                  :disabled="booking.status === 'completed'"
                >
                  <v-icon left>mdi-close</v-icon>
                  取消预约
                </v-btn>
              </v-card-actions>
        </v-card>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import api from '../services/api.js'
export default {
  name: 'BookingManagement',
  data() {
    return {
      bookings: []
    }
  },
  async mounted() {
        const res = await api.getMyBookings()
        this.bookings = res.data
  },
  methods: {
    async cancelBooking(id) {
      try {
        await api.cancelBooking(id)
        this.bookings = this.bookings.filter(b => b.id !== id)
        this.$toast.success('预约已取消')
      } catch (error) {
        console.error('取消预约失败:', error)
        this.$toast.error('取消预约失败')
      }
    },
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return '未知时间'
      const date = new Date(dateTimeStr)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    getStatusText(status) {
      const statusMap = {
        'pending': '待开始',
        'ongoing': '进行中',
        'completed': '已结束',
        'cancelled': '已取消'
      }
      return statusMap[status] || status || '未知状态'
    }
  }
}
</script>

<style scoped>
.booking-card {
  transition: transform 0.2s ease-in-out;
}

.booking-card:hover {
  transform: translateY(-2px);
}

.booking-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.info-item .v-icon {
  flex-shrink: 0;
}
</style> 
